<template>
	<view class="uppop-carousel-img-packbox">
		<view class="carousel-img-view fixed flex-direction-column flex-all-center" v-if="isShowUppop" @click="isShowUppop = false">
			<image @click="setCloseFun" 
				v-if="commonConfigs && commonConfigs.domainFrontFileLink"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/newerbornZone/new-person-close.png`"
				style="width: 35rpx;height: 35rpx;align-self: flex-end;position: relative;top: 68rpx;right: 48rpx;z-index: 10;" mode=""></image>
			
			<swiper style="width: 100%;height: 500rpx;" :autoplay="true" :interval="3000" :duration="300"
				@change="setChangeFun"
				:current="currentImgIndexs">
				<swiper-item class="relative flex flex-all-center" v-for="(item, index) in reslists" :key="index"
					style="width: 100%;height: 100%;">
					
					<image @click.stop="gooNewGoodsPage(item, index)" :src="item.reward_pool_floor_cover" mode="widthFix" style="height: auto;width: 100%;"></image>
				
					<view @click.stop v-if="item.sceneType === 1" class="flex absolute flex-wrap flex-justify-content-between" 
						style="top: 164rpx;right: 5%;width: 368rpx;height: 308rpx;overflow-y: auto;">
						<view class="carousel-lists flex-direction-column flex-all-center" v-for="(itemCoupon, indexCoupon) in item.data"
						v-if="commonConfigs && commonConfigs.domainFrontFileLink" :key="indexCoupon" 
							:style="{
								'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/newerbornZone/new-coupon-popup-bg.png)`,
								'background-size': '100% 100%',
							}">
							<view class="carousel-left flex">
								<view class="carousel-left-name flex-all-center">{{ itemCoupon.titile }}</view>
							</view>
							<view class="carousel-right flex-direction-column flex-all-center">
								<view class="carousel-right-price flex flex-all-center"><view class="item-top-unit">¥</view>{{ itemCoupon.discount }}</view>
								<view class="carousel-right-desc truncate">{{ itemCoupon.subtitile }}</view>
							</view>
						</view>
					</view>
					
					<view v-if="item.sceneType === 1" class="bottom-box-view absolute">
						<!-- 一键领取 -->
						<view class="bag-send-box-btn font-hanserif-regular relative" @click.stop="setReceiveFun" v-if="isShowReceive">
							<image :src="`${commonConfigs.domainFrontFileLink}/files/images/newerbornZone/receive-coupons-btn.png`" class="bg" />
						</view>
						
						<!-- 前往赏池 -->
						<view class="bag-send-box-btn font-hanserif-regular relative" @click.stop="gooDetailFun" v-else>
							<image :src="`${commonConfigs.domainFrontFileLink}/files/images/newerbornZone/goto-reward-btn.png`" class="bg" />
						</view>
					</view>
				
				</swiper-item>
			</swiper>
			
			<view class="flex flex-all-center"
				v-show="isShowDots"
				style="margin-top: 0rpx;width: 100%;" @click.stop=""
				>
				<template v-for="(item, index) in reslists">
					<view :key="index" @click.stop="setCurrentIndexFun(index)" style="width: 40rpx;height: 100rpx;margin: 0 12rpx;display: flex;align-items: center;justify-content: center;">
						<image 
							v-if="commonConfigs && commonConfigs.domainFrontFileLink && currentImgIndexs === index"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/newerbornZone/index-ico-active.png`"
							style="width: 35rpx;height: 35rpx;"
							mode=""></image>
						<image 
							v-if="commonConfigs && commonConfigs.domainFrontFileLink && currentImgIndexs !== index"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/newerbornZone/index-ico.png`"
							style="width: 35rpx;height: 35rpx;" mode=""
							></image>
					</view>
				</template>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { getCouponDoneApi } from '@/setupproject/INTERFACE.js';
	import { setNavigateFunTo, setJumpFunTo } from '@/setupproject/TOOLS_FUN.js';
	
	export default {
		name: "comNewPersonPopup",
		props: {
			isShowDots: {
				type: Boolean,
				default: () => true
			},
			value: {
				type: Boolean,
				default: () => false
			},
			reslists: {
				type: Array,
				default: () => []
			},
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			
			isShowUppop: {
				get() {
					return this.value
				},
				set(v) {
					this.$emit('input', v)
				}
			},
		},
		data() {
			return {
				scene: '',
				poolRewardId: '',
				currentImgIndexs: 0,
				isShowReceive: true,
			};
		},
		methods: {
			async setReceiveFun() {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await this.$store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
				
				const { code, data, msg } = await getCouponDoneApi();
				if (code === 200) {
					uni.showToast({
						title: '优惠券领取成功',
						icon: 'success'
					});
					this.poolRewardId = data.reward_pool_id;
					this.scene = data.scene;
					this.isShowReceive = false;
				}
			},
			gooDetailFun() {
				if (this.poolRewardId) {
					if (this.scene == 0) {
						return uni.redirectTo({
							url: `/pages/tabbar/tabbar?tabCurrentIndex=tabHome`
						});
					}
				} else {
					if (this.scene == 0) {
						return uni.redirectTo({
							url: `/pages/tabbar/tabbar?tabCurrentIndex=tabHome`
						});
					}

					if (this.scene == 1) {
						return uni.redirectTo({
							url: `/pages/tabbar/tabbar?tabCurrentIndex=tabHome&scene=${this.scene}`
						});
					}
					
					if (this.scene == 2) {
						return uni.redirectTo({
							url: `/pages/tabbar/tabbar?tabCurrentIndex=tabHome&scene=${this.scene}`
						});
					}
				}
			},
			
			setChangeFun(e) {
				this.currentImgIndexs = e.target.current;
			},
			
			setCurrentIndexFun(index) {
				this.currentImgIndexs = index;
			},
			
			gooNewGoodsPage(item, index) {
				if(item.sceneType === 2) {
					const params = {
						id: item.id,
						type: item.type,
						fromlink: 'newerSence',
						remain_time: item.remain_time,
						reward_pool_show_top_cover: item.reward_pool_show_top_cover,
					};
					setNavigateFunTo('secondary/specialOfferZonePage/specialOfferZonePage', params);
				}
			},
			
			setCloseFun() {
				this.isShowUppop = false;
				this.$forceUpdate();
			},
			
		},
	}
</script>

<style scoped lang="scss">
	.uppop-carousel-img-packbox {
		position: relative;
		z-index: 99999;
	}
	
	.carousel-img-view {
		width: 100vw;
		height: 100vh;
		z-index: 10000;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, .82);
	}
	
	.carousel-lists {
		width: 181rpx;
		height: 121rpx;
		margin-bottom: 8rpx;
		.carousel-left {
			width: 100%;
			// height: 30rpx;
			font-size: 14rpx;
			white-space: wrap;
			.carousel-left-name {
				width: 100%;
				height: 100%;
				text-align: center;
				color: #FFFFFF;
			}
		}
		
		.carousel-right {
			// height: 100%;
			width: 100%;
			.carousel-right-price {
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
				color: #FF8B1D;
				text-align: center;
				.item-top-unit {
					font-size: 20rpx;
				}
			}
			.carousel-right-desc {
				width: 100%;
				font-size: 14rpx;
				font-weight: 600;
				color: #729ACD;
				text-align: center;
			}
		}
		
	}
	
	.bottom-box-view {
		bottom: 58rpx;
		left: 100rpx;
		.bag-send-box-btn {
			width: 159rpx;
			height: 40rpx;
			background-size: 100% 100%;
		}
	}
</style>
